<template>
    <div class="container">
        <!-- 头部信息 -->
      <div class="header">
        <van-icon @click="goBack" name="arrow-left" class="header-left" size="30" />
              填写服务订单
      </div>
      <!-- 状态组件 -->
      <status-bar item="0"/>

      <van-cell class="cell">
        <template #title>
          <span class="server-name">{{ serviceName }}</span>
        </template>
        <template #default>
          <div class="service-text">
            服务内容
          </div>
        </template>
      </van-cell>
      <!-- 医院输入 -->
      <van-cell-group class="cell">
        <van-cell v-if="serviceName==='代跑取药'">
          <template #title>
            医院
          </template>
          <template #default>
          <div @click="showHospital=true">
            {{ form.hospital_name || '请选择指定医院' }}
            <van-icon name="arrow" />
          </div>
        </template>
        </van-cell>
        <!-- 时间选择 -->
        <van-cell>
          <template #title>
            服务时间
          </template>
          <template #default>
          <div @click="showTime=true">
            {{ currentDate || '请选择服务时间' }}
            <van-icon name="arrow" />
          </div>
        </template>
        </van-cell>
        <!-- 陪护选择 -->
        <van-cell>
          <template #title>
            人员选择
          </template>
          <template #default>
          <div @click="showCom=true">
            {{ ComName || '请选择服务人员' }}
            <van-icon name="arrow" />
          </div>
        </template>
        </van-cell>
        <!-- 地址输入 -->
        <van-cell>
          <template #title>
            地址
          </template>
          <template #default>
                 <van-field
                    class="text"
                    input-align="right"
                    v-model="form.receiveAddress"
                    placeholder="请填写您的地址"
                />
        </template>
        </van-cell>
        <!-- 电话填写 -->
        <van-cell>
          <template #title>
            联系电话
          </template>
          <template #default>
                 <van-field
                    class="text"
                    input-align="right"
                    v-model="form.tel"
                    placeholder="请填写您的联系电话"
                />
        </template>
        </van-cell>
      </van-cell-group>
  
      <van-cell-group title="服务需求" class="cell">
        <van-field
                    class="text"
                    style="height: 100px;"
                    v-model="form.demand"
                    placeholder="请填写您的额外备注"
                />
      </van-cell-group>
      <van-button @click="submit" type="primary" size="large" class="sumbit">
          提交订单
      </van-button>
  
  <!-- 医院弹出层 -->
      <van-popup
        v-model:show="showHospital"
        position="bottom"
        :style="{ height: '30%' }"
      >
      <van-picker
        :columns="HospColumns"
        @confirm="showHospConfirm"
        @cancel="showHospital = false"
      />
  </van-popup>
  <!-- 时间弹出层 -->
    <van-popup
        v-model:show="showTime"
        position="bottom"
        :style="{ height: '30%' }"
      >
      <van-date-picker
        @confirm="showTimeConfirm"
        @cancel="showTime = false"
        title="选择日期"
        :min-date="minDate"
      />
    </van-popup>
    <!-- 陪诊师弹层 -->
    <van-popup
        v-model:show="showCom"
        position="bottom"
        :style="{ height: '30%' }"
      >
      <van-picker
        :columns="ComColumns"
        @confirm="showComConfirm"
        @cancel="showCom = false"
      />
    </van-popup>
   <!-- 支付弹窗 -->
    <van-dialog v-model:show="showCode" :show-confirm-button="false">
      <van-icon name="cross" class="close" @click="closeCode" style="margin-left: 10px;" />
      <div style="text-align: center">微信支付</div>
    <van-image width="150px" height="150px" :src="codeImg" style="margin-left: 80px;"/>
    <div style="text-align: center">请使用本人微信扫描二维码</div>
  </van-dialog>
  
  
    </div>
  </template>
  
  <script setup>
  //引入状态组件
  import StatusBar from '../../components/statusBar.vue';
  //引入接口
  import { getCurrentInstance, onMounted, reactive,ref,computed} from 'vue';
  //导入二维码支付包
  import Qrcode from 'qrcode'
  import {useRouter,useRoute} from 'vue-router'
  
  //获取vue实例
  const {proxy} = getCurrentInstance()
  const router = useRouter()
  const route = useRoute()

  //服务名字
  const serviceName = ref('')
  //医院和陪护师信息
  const createInfo = reactive({
    companion:[],
    hospitals:[],
    // service:[]
  })
  //获取数据
  onMounted(async()=>{
    const {data} =await proxy.$api.getCompanion()
    // console.log(data,data,'创建订单数据');
    Object.assign(createInfo,data.data)
  })

  //点击返回
  const goBack = ()=>{
    router.go(-1)
  }
  //就诊医院
  const showHospital = ref(false)
  const HospColumns  = computed(()=>{
    return createInfo.hospitals.map(item=>{
      return {text:item.name,value:item.id}
    })
  })
  //定义form数据
  const form = reactive({})
  //获取路由中的参数
  if(route.query){
    serviceName.value = route.query.name
    if(route.query.name ==='上门助浴'){
        form.hospital_id = 1
        form.hospital_name = '上门助浴'
    }
  }
  //选择医院
  const showHospConfirm=(item)=>{
    // console.log(item,'item');
    form.hospital_id = item.selectedOptions[0].value
    form.hospital_name = item.selectedOptions[0].text
    showHospital.value = false
  }
  //选择时间
  const showTime = ref(false)
  const currentDate = ref()
  
  //定义最小日期
  const minDate = ref(new Date())
  const showTimeConfirm = (item)=>{
    const dataStr =item.selectedValues.join('-')
    currentDate.value=dataStr
    //得到时间戳
    form.starttime = new Date(dataStr).getTime()
    showTime.value=false
  }
  
  //定义陪诊师
  const showCom = ref(false)
  const ComName = ref()
  const showComConfirm = (item)=>{
    form.companion_id = item.selectedOptions[0].value
    ComName.value = item.selectedOptions[0].text
    showCom.value = false
    
  }
  //获取陪护师数据
  const ComColumns  = computed(()=>{
    return createInfo.companion.map((item)=>{
      return {text:item.name,value:item.id}
    })
  })
  
  const showCode = ref(false)
  const codeImg = ref('')
  //关闭二维码弹窗跳到订单页面
  const closeCode = ()=>{
      showCode.value = false
      router.push('/order')
    }
  //提交表单
  const submit =async ()=>{
    //定义参数类型
    const params = [
      "hospital_id",
      "hospital_name",
      "demand",
      "companion_id",
      "receiveAddress",
      "tel",
      "starttime"
    ]
    //观察是否每个值都已填写
    for(const i of params){
      if(!form[i]){
        showNotify({ message: '请填写每一项' });
        return
      }
    }
    //请求创建订单接口
    const {data}= await proxy.$api.createOrder(form)
    // console.log(res);
    //支付弹窗
    Qrcode.toDataURL(data.data.wx_code).then((url)=>{
      showCode.value = true
      codeImg.value = url
    })
    
  }
  </script>
  
  <style lang="less">
  .container {
    background-color: #f0f0f0;
    height: 100vh;
  
  }
  .header {
    padding: 10px 0;
    text-align: center;
    line-height: 30px;
    font-size: 15px;
    .header-left {
      float: left;
    }
  }
  
  .cell {
    width: 95%;
    margin: 5px auto;
    background-color: #fff;
    ::v-deep(.van-field__control) {
      color: var(--van-cell-value-color);
    }
    ::v-deep(.van-cell__title) {
      display: flex;
      align-items: center;
    }
    .server-name {
        margin-left: 10px;
      
    }
  }
  .service-text {
    background: url()
      no-repeat center center;
    background-size: 20px;
  }
  .sumbit {
    position: absolute;
    bottom: 0;
  }
  ::v-deep(.van-dialog__content) {
    text-align: center;
    padding: 20px;
    .close {
      position: absolute;
      left: 20px;
    }
  }
  
  
  </style>